import React, { createRef, PureComponent } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import './Csstransition.css'

export class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      books: [
        { id: 1, name: 'JavaScript高级程序设计', price: 99 },
        { id: 2, name: '深入理解ES6', price: 79 },
        { id: 3, name: '你不知道的JavaScript', price: 79 },
      ]
    }
    this.liRef = createRef()
  }
  addBook = () => {
    const books = [...this.state.books]
    const newBook = {
    id: Date.now(),
    name: 'React进阶之路',
    price: 79
    }
    books.push(newBook)
    this.setState({ books })
  }
  delBook = () => {
    const books = [...this.state.books]
    books.pop()
    this.setState({ books })
  }
  render() {
    const { books } = this.state
    return (
      <div>
        <h1>TransitionGroup动画</h1>
        <TransitionGroup component='ul'>
          {books.map(item => {
            return (
              <CSSTransition nodeRef={this.liRef}
               classNames={'show'} key={item.id} timeout={1000}>
                <li ref={this.liRef}>{item.name}</li>
              </CSSTransition>
            )
          })}
        </TransitionGroup>
        <button onClick={() => this.addBook()}>添加</button>
        <button onClick={() => this.delBook()}>删除</button>
        {/* 
          TransitionGroup 包裹CSSTransition
          CSSTransition 包裹需要动画的元素
          component = 'ul'  将TransitionGroup渲染成ul
        */}
      </div>
    )
  }
}

export default App